<template>

  <div class="dialog-container">
    <el-dialog
      :close-on-click-modal="false"
      :title="'编辑表单'"
      :visible="dialogVisible"
      width="30%"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        label-width="110px"
        size="mini"
      >
        <el-row type="flex" justify="center">

          <el-col type="flex" justify="center">
            <el-form-item label="json表单" type="flex" justify="center">
              <el-input v-model="dataForm.formContent" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">

          <el-col type="flex" justify="center">
            <el-form-item label="记事" type="flex" justify="center">
              <el-input v-model="dataForm.recording" type="textarea" :rows="4" placeholder="请输入码名称" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col type="flex" justify="center">
            <el-form-item label="上传文件：图片" type="flex" justify="center">
              <template>
                <el-upload
                  class="upload-demo"
                  :action="fileUrl"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeImageUpload"
                  :on-success="onSuccess"
                  :file-list="fileList"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
                </el-upload>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col type="flex" justify="center">
            <el-form-item label="上传文件：视频" type="flex" justify="center">
              <template>
                <el-upload
                  v-loading="loadingFlag"
                  :action="fileUrl"
                  class="file-uploader"
                  :on-preview="handlePreviewVideo"
                  :on-remove="handleRemoveVideo"
                  :show-file-list="true"
                  multiple
                  :limit="5"
                  :on-exceed="handleExceed"
                  :on-success="onSuccessVideo"
                  :before-upload="beforeVideoUpload"
                  :file-list="fileListVideo"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">上传文件不超过50MB</div>
                </el-upload>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleCommit()">保存</el-button>
        <el-button class="sure-btn" size="mini" type="primary" @click="closeDialog()">取消</el-button>
      </span>

    </el-dialog>
    <el-image-viewer
      v-if="imagePreview"
      :append-to-body="true"
      :on-close="closeViewer"
      :url-list="[url]"
    />
  </div>
</template>

<script>

import { fileUrl, staticImgUrl } from '@/url'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'EditMaintenaFormDialog',
  components: {
    ElImageViewer
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      loadingFlag: false,
      saveOrExit: '1', // 1退出 2 保存
      saveLoading: false,
      dataForm: {
        id: null,
        maintenanceDetailsId: null,
        formTempId: null,
        formContent: null,
        recording: null,
        filePath: null,
        videoPath: null,
        index: null// 用于计算父页面的索引
      },
      fileUrl: fileUrl,
      fileList: [],
      resultList: [],
      imagePreview: false,
      url: '',
      fileUrlVideo: fileUrl,
      fileListVideo: [],
      resultListVideo: [],
      imagePreviewVideo: false,
      urlVideo: ''
    }
  },
  created() {
    /* this.taskTypes = getDict('e008')
    this.taskStatus = getDict('e009')*/
  },
  methods: {

    initData() {
      if (this.obj.data.filePath) {
        this.fileList = JSON.parse(this.obj.data.filePath)
        this.resultList = JSON.parse(this.obj.data.filePath)
      }
      if (this.obj.data.videoPath) {
        this.fileListVideo = JSON.parse(this.obj.data.videoPath)
        this.resultListVideo = JSON.parse(this.obj.data.videoPath)
      }
      // 页面加载初始化数据
      this.dataForm.id = null
      this.dataForm.maintenanceDetailsId = null
      this.dataForm.formTempId = null
      this.dataForm.formContent = null
      this.dataForm.recording = null
      this.dataForm.filePath = null
      this.dataForm.videoPath = null
      this.dataForm.index = null
      this.saveOrExit = '1'

      const objData = this.obj.data

      this.dataForm.maintenanceDetailsId = objData.maintenanceDetailsId
      this.dataForm.formTempId = objData.formTempId
      this.dataForm.index = this.obj.index

      this.dataForm.id = objData.id
      this.dataForm.formContent = objData.formContent
      this.dataForm.recording = objData.recording
      this.dataForm.filePath = objData.filePath
      this.dataForm.videoPath = objData.videoPath
    },
    handleCommit() {
      this.dataForm.filePath = JSON.stringify(this.resultList)
      this.dataForm.videoPath = JSON.stringify(this.resultListVideo)
      this.saveOrExit = '2'
      this.$emit('flushPage', this.dataForm)
      // this.saveLoading = false
    },
    handleRemove(file, fileList) {
      this.resultList = []
      fileList.forEach(value => {
        this.resultList.push({
          name: value.name,
          url: value.url
        })
      })
    },
    handleRemoveVideo(file, fileList) {
      this.resultListVideo = []
      fileList.forEach(value => {
        this.resultListVideo.push({
          name: value.name,
          url: value.url
        })
      })
    },
    handlePreview(file) {
      console.log(file)
      this.url = staticImgUrl + file.url
      this.imagePreview = true
    },
    handlePreviewVideo(file) {
    },
    onSuccess(res, file, fileList) {
      this.resultList.push({
        name: file.name,
        url: file.response.data.url
      })
    },
    onSuccessVideo(res, file, fileList) {
      this.resultListVideo.push({
        name: file.name,
        url: file.response.data.url
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    closeViewer() {
      this.imagePreview = false
    },
    beforeVideoUpload(file) {
      const isLt6M = file.size / 1024 / 1024 < 50
      if (!isLt6M) {
        this.$message.error('上传视频大小不能超过 50MB!')
        this.loadingFlag = false
      }
      return isLt6M
    },
    beforeImageUpload(file) {
      var filename = file.name
      var index1 = filename.lastIndexOf('.')
      var index2 = filename.length
      var suffix = filename.substring(index1 + 1, index2)
      if (suffix !== 'png' && suffix !== 'jpg' && suffix !== 'jpeg') {
        this.$message.error('只能上传jpg/png图片格式')
        this.loadingFlag = false
        return false
      }
      const isLt6M = file.size / 1024 / 1024 < 5
      if (!isLt6M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        this.loadingFlag = false
      }
      return isLt6M
    },
    closeDialog() {
      if (this.saveOrExit === '1') {
        this.$confirm('数据未确定，是否退出?', '提示', {
          confirmButtonText: '退出',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.fileList = []
          this.resultList = []
          this.resultListVideo = []
          this.fileListVideo = []
          this.$emit('closeDialog')
        }, () => {

        }).catch(() => {

        })
      }
      /*     this.clearData()*/
      /*      this.$refs['form'].clearValidate()*/
    }
  }
}
</script>

<style lang="scss" scoped>
.w-220{
  width: 220px !important;
}
</style>
